<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端底部展示底部组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #007bff;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --border: #eee;
      
      /* 场景主题色 */
      --theme1: #1877F2; /* 社交互动 */
      --theme2: #E4405F; /* 内容发布 */
      --theme3: #00C853; /* 通知提醒 */
      --theme4: #212529; /* 深色模式 */
      --theme5: #FF9800; /* 位置服务 */
      --theme6: #9C27B0; /* 设置偏好 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      position: relative;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    
    /* 页面内容区 */
    .page-header {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .content-area {
      padding: 20px;
      flex: 1;
      overflow-y: auto;
    }
    
    .preview-card {
      background-color: white;
      border-radius: 12px;
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 20px;
    }
    
    .preview-image {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    .preview-content {
      padding: 15px;
    }
    
    .preview-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .preview-text {
      font-size: 14px;
      color: #666;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .preview-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #999;
    }
    
    /* 底部组件容器 - 直接展示在底部 */
    .bottom-container {
      width: 100%;
      background-color: var(--white);
      border-top: 1px solid var(--border);
      transition: all 0.3s ease;
    }
    
    /* 底部导航栏样式 */
    .bottom-nav {
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--secondary);
      text-decoration: none;
      font-size: 10px;
      padding: 5px 10px;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 场景1：社交互动底部组件 */
    .scene1 {
      padding: 10px 15px;
    }
    
    .scene1 .interaction-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .scene1 .action-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 14px;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 20px;
      transition: all 0.2s;
    }
    
    .scene1 .action-btn:hover {
      background-color: rgba(0, 0, 0, 0.05);
      color: var(--primary);
    }
    
    .scene1 .action-btn.primary {
      background-color: var(--primary);
      color: white;
    }
    
    .scene1 .action-btn.primary:hover {
      background-color: rgba(0, 123, 255, 0.9);
    }
    
    /* 场景2：内容发布底部组件 */
    .scene2 {
      padding: 8px 15px;
    }
    
    .scene2 .editor-bar {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    
    .scene2 .editor-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 14px;
      outline: none;
    }
    
    .scene2 .editor-input:focus {
      border-color: var(--primary);
    }
    
    .scene2 .editor-actions {
      display: flex;
      gap: 8px;
    }
    
    .scene2 .editor-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    /* 场景3：通知提醒底部组件 */
    .scene3 {
      padding: 10px 0;
    }
    
    .scene3 .notifications-bar {
      display: flex;
      overflow-x: auto;
      padding: 0 15px;
      gap: 10px;
    }
    
    .scene3 .notification-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 60px;
      padding: 5px 0;
      cursor: pointer;
      position: relative;
    }
    
    .scene3 .notification-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: rgba(0, 123, 255, 0.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-bottom: 5px;
    }
    
    .scene3 .notification-label {
      font-size: 10px;
      color: var(--secondary);
    }
    
    .scene3 .notification-badge {
      position: absolute;
      top: 0;
      right: 5px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 场景4：深色模式底部组件 */
    .scene4 {
      --border: #333;
      --dark: #f8f9fa;
      background-color: #1e1e1e;
      border-top-color: #333;
    }
    
    .scene4 .nav-item {
      color: #999;
    }
    
    .scene4 .nav-item.active {
      color: var(--primary);
    }
    
    .scene4 .action-btn {
      color: #999;
    }
    
    .scene4 .action-btn:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .scene4 .editor-input {
      background-color: #333;
      border-color: #444;
      color: white;
    }
    
    .scene4 .notification-icon {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .scene4 .notification-label {
      color: #bbb;
    }
    
    /* 场景5：位置服务底部组件 */
    .scene5 {
      padding: 10px 15px;
    }
    
    .scene5 .location-bar {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .scene5 .location-info {
      flex: 1;
    }
    
    .scene5 .location-name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .scene5 .location-address {
      font-size: 12px;
      color: #666;
    }
    
    .scene5 .location-btn {
      padding: 6px 14px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 场景6：设置偏好底部组件 */
    .scene6 {
      padding: 8px 0;
    }
    
    .scene6 .settings-bar {
      display: flex;
      justify-content: space-around;
      padding: 5px 0;
    }
    
    .scene6 .setting-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }
    
    .scene6 .setting-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: rgba(156, 39, 176, 0.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    
    .scene6 .setting-label {
      font-size: 10px;
      color: var(--secondary);
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { --primary: var(--theme6); }
    
    /* 隐藏所有场景，只显示当前激活的 */
    .bottom-scene {
      display: none;
    }
    
    .bottom-scene.active {
      display: block;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择底部组件样式</div>
    <div class="switcher-option active" data-scene="1">社交互动</div>
    <div class="switcher-option" data-scene="2">内容发布</div>
    <div class="switcher-option" data-scene="3">通知提醒</div>
    <div class="switcher-option" data-scene="4">深色模式</div>
    <div class="switcher-option" data-scene="5">位置服务</div>
    <div class="switcher-option" data-scene="6">设置偏好</div>
  </div>
  
  <div class="container theme1">
    <div class="page-header">
      <h1 class="page-title">社交平台</h1>
      <button class="header-btn">
        <i class="fa fa-search"></i>
      </button>
    </div>
    
    <div class="content-area">
      <div class="preview-card">
        <img src="https://picsum.photos/id/65/800/600" alt="动态图片" class="preview-image">
        <div class="preview-content">
          <h3 class="preview-title">城市公园的日落太美了</h3>
          <p class="preview-text">今天傍晚在城市公园散步，偶遇绝美日落，分享给大家...#自然风光 #城市生活</p>
          <div class="preview-meta">
            <span>李明 · 2小时前</span>
            <span><i class="fa fa-heart-o"></i> 128</span>
          </div>
        </div>
      </div>
      
      <div class="preview-card">
        <div class="preview-content">
          <h3 class="preview-title">周末有没有一起打球的朋友？</h3>
          <p class="preview-text">周六下午2点，阳光体育馆，约了几个朋友打篮球，还缺2人，有没有一起的？</p>
          <div class="preview-meta">
            <span>王强 · 昨天</span>
            <span><i class="fa fa-comment-o"></i> 32</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部组件容器 -->
    <div class="bottom-container">
      <!-- 场景1：社交互动底部组件 -->
      <div class="bottom-scene scene1 active" id="scene1">
        <div class="interaction-bar">
          <button class="action-btn">
            <i class="fa fa-heart-o"></i>
            <span>点赞</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-comment-o"></i>
            <span>评论</span>
          </button>
          <button class="action-btn">
            <i class="fa fa-share"></i>
            <span>分享</span>
          </button>
          <button class="action-btn primary">
            <i class="fa fa-bookmark-o"></i>
            <span>收藏</span>
          </button>
        </div>
      </div>
      
      <!-- 场景2：内容发布底部组件 -->
      <div class="bottom-scene scene2" id="scene2">
        <div class="editor-bar">
          <input type="text" class="editor-input" placeholder="分享你的想法...">
          <div class="editor-actions">
            <button class="editor-btn">
              <i class="fa fa-image"></i>
            </button>
            <button class="editor-btn">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 场景3：通知提醒底部组件 -->
      <div class="bottom-scene scene3" id="scene3">
        <div class="notifications-bar">
          <div class="notification-item">
            <div class="notification-icon">
              <i class="fa fa-heart"></i>
            </div>
            <div class="notification-label">点赞</div>
            <div class="notification-badge">5</div>
          </div>
          <div class="notification-item">
            <div class="notification-icon">
              <i class="fa fa-comment"></i>
            </div>
            <div class="notification-label">评论</div>
            <div class="notification-badge">3</div>
          </div>
          <div class="notification-item">
            <div class="notification-icon">
              <i class="fa fa-user-plus"></i>
            </div>
            <div class="notification-label">关注</div>
            <div class="notification-badge">2</div>
          </div>
          <div class="notification-item">
            <div class="notification-icon">
              <i class="fa fa-bell"></i>
            </div>
            <div class="notification-label">系统</div>
          </div>
          <div class="notification-item">
            <div class="notification-icon">
              <i class="fa fa-gift"></i>
            </div>
            <div class="notification-label">活动</div>
          </div>
        </div>
      </div>
      
      <!-- 场景4：深色模式底部组件 -->
      <div class="bottom-scene scene4" id="scene4">
        <div class="bottom-nav">
          <a href="#" class="nav-item active">
            <i class="fa fa-home nav-icon"></i>
            <span>首页</span>
          </a>
          <a href="#" class="nav-item">
            <i class="fa fa-compass nav-icon"></i>
            <span>发现</span>
          </a>
          <a href="#" class="nav-item">
            <i class="fa fa-plus-circle nav-icon"></i>
            <span>发布</span>
          </a>
          <a href="#" class="nav-item">
            <i class="fa fa-bell-o nav-icon"></i>
            <span>通知</span>
          </a>
          <a href="#" class="nav-item">
            <i class="fa fa-user-o nav-icon"></i>
            <span>我的</span>
          </a>
        </div>
      </div>
      
      <!-- 场景5：位置服务底部组件 -->
      <div class="bottom-scene scene5" id="scene5">
        <div class="location-bar">
          <i class="fa fa-map-marker" style="color: var(--primary); font-size: 20px;"></i>
          <div class="location-info">
            <div class="location-name">中央公园</div>
            <div class="location-address">城市中心区公园路88号</div>
          </div>
          <button class="location-btn">更改</button>
        </div>
      </div>
      
      <!-- 场景6：设置偏好底部组件 -->
      <div class="bottom-scene scene6" id="scene6">
        <div class="settings-bar">
          <div class="setting-item">
            <div class="setting-icon">
              <i class="fa fa-bell"></i>
            </div>
            <div class="setting-label">通知</div>
          </div>
          <div class="setting-item">
            <div class="setting-icon">
              <i class="fa fa-lock"></i>
            </div>
            <div class="setting-label">隐私</div>
          </div>
          <div class="setting-item">
            <div class="setting-icon">
              <i class="fa fa-cog"></i>
            </div>
            <div class="setting-label">设置</div>
          </div>
          <div class="setting-item">
            <div class="setting-icon">
              <i class="fa fa-question-circle"></i>
            </div>
            <div class="setting-label">帮助</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentScene = '1';
    
    // DOM元素
    const container = document.querySelector('.container');
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const scenes = {
      '1': document.getElementById('scene1'),
      '2': document.getElementById('scene2'),
      '3': document.getElementById('scene3'),
      '4': document.getElementById('scene4'),
      '5': document.getElementById('scene5'),
      '6': document.getElementById('scene6')
    };
    
    // 初始化
    function init() {
      // 场景切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const scene = this.getAttribute('data-scene');
          switchScene(scene);
        });
      });
      
      // 添加交互事件
      addInteractionEvents();
    }
    
    // 添加交互事件
    function addInteractionEvents() {
      // 社交互动按钮
      const actionBtns = document.querySelectorAll('.action-btn');
      actionBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          const icon = this.querySelector('i');
          if (icon.classList.contains('fa-heart-o')) {
            icon.classList.replace('fa-heart-o', 'fa-heart');
            this.style.color = 'var(--primary)';
          } else if (icon.classList.contains('fa-heart')) {
            icon.classList.replace('fa-heart', 'fa-heart-o');
            if (!this.classList.contains('primary')) {
              this.style.color = '';
            }
          }
        });
      });
      
      // 编辑器发布按钮
      const postBtn = document.querySelector('.editor-btn:last-child');
      if (postBtn) {
        postBtn.addEventListener('click', function() {
          const input = document.querySelector('.editor-input');
          if (input.value.trim()) {
            alert(`发布成功: ${input.value.trim()}`);
            input.value = '';
          } else {
            alert('请输入内容');
          }
        });
      }
      
      // 通知项点击
      const notificationItems = document.querySelectorAll('.notification-item');
      notificationItems.forEach(item => {
        item.addEventListener('click', function() {
          const badge = this.querySelector('.notification-badge');
          if (badge) badge.remove();
        });
      });
      
      // 导航项点击
      const navItems = document.querySelectorAll('.nav-item');
      navItems.forEach(item => {
        item.addEventListener('click', function(e) {
          e.preventDefault();
          navItems.forEach(i => i.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 位置更改按钮
      const locationBtn = document.querySelector('.location-btn');
      if (locationBtn) {
        locationBtn.addEventListener('click', function() {
          alert('打开位置选择器');
        });
      }
      
      // 设置项点击
      const settingItems = document.querySelectorAll('.setting-item');
      settingItems.forEach(item => {
        item.addEventListener('click', function() {
          const label = this.querySelector('.setting-label').textContent;
          alert(`打开${label}设置`);
        });
      });
    }
    
    // 切换场景
    function switchScene(scene) {
      // 隐藏所有场景
      Object.values(scenes).forEach(s => s.classList.remove('active'));
      
      // 显示选中场景
      scenes[scene].classList.add('active');
      
      // 更新当前场景
      currentScene = scene;
      
      // 更新容器主题
      container.className = 'container';
      container.classList.add(`theme${scene}`);
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-scene') === scene) {
          option.classList.add('active');
        }
      });
    }
    
    // 启动
    init();
  </script>
</body>
</html>
